<template>
  <div class="">
    <div>
      <span
        v-for="(item, index) in tab"
        :key="index"
        @mouseenter="change(index)"
        :class="{ active: index == flag }"
        >{{ item.title }}</span
      >
    </div>
    <ul class="con">
      <li v-for="(item, index) in tab" :key="index" v-show="index == flag">
        <!-- {{ item.con }} -->
        <div v-for="(i, a) in item.con" :key="a">
          <img :src="i.img" alt="" />
          <span>{{ i.name }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: 0,
      tab: [
        {
          title: "家居建材",
          con: [
            {
              name: "职场装修",
              img: "01.jpg",
            },
            {
              name: "职场装修2",
              img: "02.jpg",
            },
            {
              name: "职场装修3",
              img: "03.jpg",
            },
          ],
        },
        {
          title: "家居装饰",
          con: [
            {
              name: "2职场装修",
              img: "01.jpg",
            },
            {
              name: "2职场装修2",
              img: "02.jpg",
            },
            {
              name: "2职场装修3",
              img: "03.jpg",
            },
          ],
        },
        {
          title: "家居地板砖",
          con: [
            {
              name: "3职场装修",
              img: "01.jpg",
            },
            {
              name: "3职场装修2",
              img: "02.jpg",
            },
            {
              name: "3职场装修3",
              img: "03.jpg",
            },
          ],
        },
        {
          title: "家居柜子",
          con: [
            {
              name: "4职场装修",
              img: "01.jpg",
            },
            {
              name: "4职场装修2",
              img: "02.jpg",
            },
            {
              name: "4职场装修3",
              img: "03.jpg",
            },
          ],
        },
      ],
    };
  },
  mounted() {},
  methods: {
    change(i) {
      this.flag = i;
    },
  },
};
</script>

<style lang="scss">
.active {
  background: pink;
  color: #fff;
}
</style>
